<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- base lib -->
<script type="text/javascript" src="../script/jquery.js"></script>

<style type="text/css">
defaultbar
{top:100px;
    margin-top: 100px;
    height: 5px;
    background-color: #FFFFE0;
    border: 1px solid #A9C9E2;
    position: relative;
    width: 500px;
}
.defaultbar .jquery-completed
{   height:3px;
    background-color: #7d9edb;
    top: 1px;
    left:1px;
    position: absolute;
    width: 150px;
}
.defaultbar .jquery-jslider
{
    height: 15px;
    background-color: #E6E6FA;
    border: 1px solid #A5B6C8;
    top: -6px;
    display: block;
    cursor: pointer;
    position: absolute;
    width: 5px;
    left: 150px;
}

</style>
<script>
window.onload=function (){
(function($){
	
})(jQuery);
}

var d = null ;
function dragStart() {
        d = {
            left: parseInt(jQuery("#slider").css('left')),
            pageX: event.x
        };
        jQuery("#slider").bind('mousemove', d, drag).bind('mouseup', d, drop);
        //slider.onmousemove = function() {drag();} ;
}

function drag() {

    //var d = event.data;
    //alert(d.pageX) ;
    //debugger;
    var l = Math.min(Math.max(event.x - d.pageX + d.left, 10), 490);

    log.innerText = l +"ssssssss" ;
    
    //$sliderProcess(slider, completedbar, l);
    //push two parameters: 1st:percentage, 2nd: event
    jQuery("#completer").css("width", l - 1) ;
    jQuery("#slider").css("left", l - 1) ;
    
}

function drop() {
    //slider.removeClass(ps.sliderHover);
    //push two parameters: 1st:percentage, 2nd: event
    //ps.onChanged(parseInt(slider.css('left')) / ps.limited.max, e);
    var l = Math.min(Math.max(event.x - d.pageX + d.left, 10), 490);

    //$sliderProcess(slider, completedbar, l);
    //push two parameters: 1st:percentage, 2nd: event
    
    jQuery("#slider").unbind('mousemove', drag).unbind('mouseup', drop);
}
</script>
</head>
<body>

	<div class="defaultbar">
	  <div class="jquery-completed" id="completer"> </div>
	  <div class="jquery-jslider" onmousedown="dragStart()" id="slider"> </div>
	</div>
	
	<div id="log"></div>
</body>
</html>